
    <style>

        #main{
            position:relative;
            width: 1500px;
            margin:0 auto;
        }

        .box{
            padding: 10px 0 0 15px;
            float: left;
        }

        .pic{
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-shadow: 0 0 5px #ccc;
        }

        .pic img{
            width: 165px;
            height: auto;
        }
    </style>

<div id="main">

</div>
</div>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script>
    $(document).ready(function(){
        $.ajax({
            url:'/manager/img',
            type:'get',
            dataType:'json',
            success:function(data){
                if(data && data.length>0){
                    var imgs = data;
                    for(var i=0;i<imgs.length;i++){
                        if(imgs[i].imgUrl){
                            $("#main").append("<div class='box'><div class='pic'><img src='"+imgs[i].imgUrl+"' /></div></div>");
                        }
                    }
                    var lastImg = $("#main").find("img").last();
                    $(lastImg).on("load",function(){
                        waterpull('#main',".box");
                    });
//
                }
            }
        });
        var ajax;
        $("#bodyCont").on("scroll",function(){
            console.log(111);
            var main = $("#bodyCont");
            var clientHeight = main.outerHeight();
            var scrollTop = main.scrollTop();
            var lastImgH = $($(".box").last()).outerHeight() + $($(".box").last()).offset().top;
            if(lastImgH < clientHeight + scrollTop){
                var url = '/manager/splid';
                    ajax =$.ajax({
                        url:url,
                        type:'get',
                        dataType:'json',
                        success:function(data){
                            if(data && data.length>0){
                                var imgs = data;
                                for(var i=0;i<imgs.length;i++){
                                    if(imgs[i].imgUrl){
                                        $("#main").append("<div class='box'><div class='pic'><img src='"+imgs[i].imgUrl+"' /></div></div>");                                    }
                                }

                                var lastImg = $("#main").find("img").last();
                                $(lastImg).on("load",function(){
                                    waterpull('#main',".box");
                                });
                            }
                        }
                    });


            }

        });


    });

    function waterpull(container,box){

        var boxs = $(box);   //获取所有的box
        var clientWidth = $(container).outerWidth();   //获取容器的宽度
        var boxWidth = $(boxs.get(0)).outerWidth();   //获取box的宽度
        var cols = Math.floor( clientWidth/ boxWidth); // 容器宽度 / box的宽度 =  列数
        var hArr = [];   // 声明一个储存当前列高度的数组

        boxs.each(function(index,docEle){
            if(index < cols){
                hArr.push($(boxs.get(index)).outerHeight());
            }else{
                var minH = Math.min.apply(null,hArr);   //获取最小高度的列,然后在最小高度下面添加图片
                var minIndex = $.inArray(minH,hArr);	//获取最小高度列的索引
                var currLeft = boxWidth * minIndex; 	//设置当前box的left的值,相对于最小高度的列
                var top =  minH;
                $(docEle).css({"position":'absolute',left:currLeft,top:top});
                hArr[minIndex] = hArr[minIndex]+$(docEle).outerHeight();
            }
        });
    }
</script>
